<template>
  <view class="container">
    <view class="address-list">
      <view
        v-for="address in addresses"
        :key="address.id"
        class="w-[96%] flex space-between mb-20rpx py-4 px-2 shadow-md rounded-10rpx"
      >
        <view class="w-[80%] flex flex-col justify-center">
          <view class="w-[60%] flex justify-flex-start items-center mb-2">
            <text class="text-30rpx">{{ address.name }}</text>
            <text class="text-gray-600 ml-20rpx">{{ address.phone }}</text>
          </view>
          <view class="address-content text-gray-700 mb-4">
            {{ address.location }}
          </view>
        </view>
        <view
          @click="handleClick(address)"
          class="text-green-500 flex items-center"
        >
          编辑地址
        </view>
      </view>

      <view class="w-[96%] flex justify-center items-center">
        <wd-button type="primary" size="large" @click="handleAddClick">
          添加新地址
        </wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getAddress } from '@/api/address'

// 模拟地址数据
const addresses = ref<UserAddress[]>([])

// 点击处理函数
const handleClick = (address: UserAddress) => {
  console.log(address)

  uni.navigateTo({ url: '/pages/address/addressAdd?id=' + address.id })
}

// 添加新地址点击处理函数
const handleAddClick = () => {
  uni.navigateTo({ url: '/pages/address/addressAdd' })
}

onShow(async () => {
  const res = await getAddress<any, UserAddress>({
    user_id: uni.getStorageSync('user').id
  })
  if (res.code === 200) {
    addresses.value = res.data.items
  }
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-align: center;
}

.address-list {
  width: 100%;
}

:deep(.wd-button) {
  background-color: #4caf50 !important;
}
</style>
